import View from "./ExampleBpmn.view";
import VerticalDialog from "./ExampleBpmnVerticalDialog";
import HorizontalDialog from "./ExampleBpmnHorizontalDialog";

interface INP {

}

@YvanUI.BizModule()
export default class Module extends View<Module, INP> {

    bpmnXML = '';

    onLoad(): void {
        super.onLoad();
        // var diagramUrl = '/year_plan.bpmn';
        // $.get(diagramUrl, this.openDiagram, 'text');
    }

    click1() {
        // attach an overlay to a node
        this.refs.bpmnViewer.bpmnOverlays.add('Activity_2', 'note', {
            position: {
                bottom: 0,
                right: 0
            },
            html: '<div class="diagram-note" style="color:red">当前节点已经有100个项目待完成，再不做就来不及了</div>'
        });
        // add marker
        this.refs.bpmnViewer.bpmnCanvas.addMarker('Activity_2', 'needs-discussion');
    }

    click2() {
        this.refs.bpmnViewer.openDiagram(this.bpmnXML);
    }

    click3() {
        const data = [
            { id:'Activity_1', value:"生产管理室审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2017-08-01"},
            { id:'Activity_2', value:"工程管部理审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2017-09-10" },
            { id:'Activity_3', value:"生产副总审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2017-12-11" },
            { id:'Activity_4', value:"总工程师审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2018-02-10" },
            { id:'Activity_5', value:"总经理审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2018-03-15" },
            { id:'Activity_6', value:"董事长审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2018-03-21"},
            { id:'Activity_7', value:"记录档案", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.",date:"2019-05-16" },
        ];
        new HorizontalDialog().showDialog({
            timeLineData: data,
            bpmnUrl: '/year_plan.bpmn'
        }, this);
    }

    click4() {
        const data = [
            { id:'Activity_1', value:"生产管理室审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2017-08-01"},
            { id:'Activity_2', value:"工程管部理审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2017-09-10" },
            { id:'Activity_3', value:"生产副总审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2017-12-11" },
            { id:'Activity_4', value:"总工程师审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2018-02-10" },
            { id:'Activity_5', value:"总经理审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2018-03-15" },
            { id:'Activity_6', value:"董事长审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2018-03-21"},
            { id:'Activity_7', value:"记录档案", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.",date:"2019-05-16" },
        ];
        new VerticalDialog().showDialog({
            timeLineData: data,
            bpmnUrl: '/year_plan.bpmn'
        }, this);
    }

    openDiagram(bpmnXML) {
        this.bpmnXML = bpmnXML;
        this.refs.bpmnViewer.openDiagram(this.bpmnXML);
    }

    loadSuccess() {
        // attach an overlay to a node
        this.refs.bpmnViewer.bpmnOverlays.add('Activity_1', 'note', {
            position: {
                bottom: 0,
                right: 0
            },
            html: '<div class="diagram-note" style="color:red">加载完成</div>'
        });
        // add marker
        // this.refs.bpmnViewer.bpmnCanvas.addMarker('Activity_2', 'needs-discussion');
    }

    loadFailed() {

    }

    itemClick(sender:any,  item: any) {
        this.refs.bpmnViewer.bpmnOverlays.add(item.id, 'note', {
            position: {
                bottom: 0,
                right: 0
            },
            html: '<div class="diagram-note" style="color:red">被点击了</div>'
        });
    }

    itemHover(sender:any, item: any) {
        if (item.id.indexOf('Activity_') == -1) {
            return;
        }
        const iid = item.id.substr('Activity_'.length);
        const timeDiv =  $("div[webix_tl_id=" + iid + "]");

        $(timeDiv).css(
            "background-color","lightblue"
        )
    }

    itemOut(sender:any, item: any) {
        if (item.id.indexOf('Activity_') == -1) {
            return;
        }
        const iid = item.id.substr('Activity_'.length);
        const timeDiv =  $("div[webix_tl_id=" + iid + "]");

        $(timeDiv).css("background-color", "")
    }
}